<template>
  <view v-if="shenheStatus == 0" class="pages">
    <u-sticky :h5-nav-height="0">
      <view class="header">
        <view class="search">
          <u-search
            @search="clear"
            :show-action="false"
            placeholder="请输入商品名称搜索"
            v-model="keyword"
          ></u-search>
        </view>

        <view class="cat">
          <view
            @click="handle('changeCategory', item.id)"
            :class="['item', item.id === catId ? 'on' : '']"
            v-for="item of catList"
            :key="item.id"
            >{{ item.name }}</view
          >
        </view>

        <view class="filter" v-if="!catId">
          <view
            :class="[
              'item',
              getClass(item.id),
              item.id === sort ? 'active' : ''
            ]"
            v-for="item of sortList"
            :key="item.id"
            @click="handle('changeFilter', item.id)"
          >
            {{ item.name }}

            <view class="icons" v-if="item.id === 2">
              <view class="s s1">
                <i class="iconfont icon-arrow-down-filling"></i>
              </view>
              <view class="s s2">
                <i class="iconfont icon-arrow-down-filling"></i>
              </view>
            </view>
          </view>
        </view>
        <view class="ranking" v-else>
          <view class="hd flex">
            <view class="s s1"><view class="tit">用户信息</view></view>
            <view class="s s2 tac"><view class="tit">订单数</view></view>
            <view class="s s2 tac"><view class="tit">订单金额</view></view>
            <view class="s s2 tar"><view class="tit">推广人数</view></view>
          </view>
        </view>
      </view>
    </u-sticky>

    <view class="content">
      <view class="goodsList" v-if="!catId">
        <view
          class="item"
          v-for="item of goodsList"
          :key="item.id"
          @click="
            $utils.toUrl(
              `/videoNumber/goods/index?id=${item.id}&product_id=${item.wx_product_id}`
            )
          "
        >
          <view class="img">
            <image mode="aspectFill" :src="item.pic_url"></image>
          </view>
          <view class="con">
            <view class="name">{{ item.name }}</view>

            <view class="tag">
              <view>销量 {{ item.sales }}件</view>
            </view>

            <view class="fd">
              <view class="price"
                ><text>{{ item.price | priceBeforeZero }}</text
                >{{ item.price | priceAfterZero }}</view
              >

              <view class="amount">
                <view>￥{{ item.rebate }}</view>
                <image
                  mode="heightFix"
                  v-if="asyncImgs"
                  :src="asyncImgs.video_shop.zhuan"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="ranking" v-else>
        <view
          class="bd flex"
          v-for="(item, index) of rankingList"
          :key="item.sharer_id"
        >
          <view class="s s1">
            <view class="info">
              <view class="img">
                <image
                  v-if="index === 0"
                  class="icon"
                  mode="widthFix"
                  :src="asyncImgs.video_shop.img_1"
                ></image>
                <image
                  v-if="index === 1"
                  class="icon"
                  mode="widthFix"
                  :src="asyncImgs.video_shop.img_2"
                ></image>
                <image
                  v-if="index === 2"
                  class="icon"
                  mode="widthFix"
                  :src="asyncImgs.video_shop.img_3"
                ></image>
                <image class="pic" mode="aspectFill" :src="item.avatar"></image>
              </view>
              <view class="goodsName">{{ item.nickname }}</view>
            </view>
          </view>
          <view class="s s2 tac"
            ><view class="tit">{{ item.order_num }}</view></view
          >
          <view class="s s2 tac"
            ><view class="tit">{{ item.order_sum }}</view></view
          >
          <view class="s s2 tar"
            ><view class="tit">{{ item.first_count }}</view></view
          >
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { sharerOrderNum } from "@/api/videoShop";

export default {
  components: { Shenhe },

  computed: {
    getClass() {
      return (id) => {
        if (id == 2) {
          let { sort_type } = this,
            _class = "";
          switch (sort_type) {
            case "0":
              _class = "down";
              break;

            case "1":
              _class = "up";
              break;

            default:
              break;
          }

          return _class;
        }

        return "";
      };
    }
  },

  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    }
  },

  data() {
    return {
      keyword: "",
      catId: 0,
      catList: [
        { id: 0, name: "热销商品" },
        { id: 1, name: "带货排行" }
      ],

      sort_type: "",
      sort: "",
      sortList: [
        { id: 1, name: "新上架" },
        { id: 3, name: "销量" },
        // { id: 5, name: "佣金率" },
        { id: 2, name: "价格" }
      ],

      goodsList: [],
      rankingList: [],
      page: 1,
      is_end: false
    };
  },

  async onLoad() {
    this.getGoodsList();
  },

  onShow() {},

  methods: {
    getList() {
      if (this.catId) {
        this.getRankingList();
      } else {
        this.getGoodsList();
      }
    },

    clear() {
      this.goodsList = [];
      this.rankingList = [];
      this.page = 1;
      this.is_end = false;

      this.getList();
    },

    async getGoodsList() {
      let { page, sort, sort_type, keyword } = this,
        params = {
          page,
          sort,
          sort_type,
          is_videoShopGoods: 1,
          keyword
        };
      const res = await this.$allrequest.search.getSearchList(params);

      if (!res.code) {
        page += 1;
        let { list, row_count } = res.data;
        this.goodsList = [...this.goodsList, ...list];
        if (this.goodsList.length >= parseFloat(row_count)) {
          this.is_end = true;
        }
      }
    },

    async getRankingList() {
      let { page } = this,
        params = {
          page
        };
      const res = await sharerOrderNum(params);

      if (!res.code) {
        page += 1;
        let { list, totalCount } = res.data;
        this.rankingList = [...this.rankingList, ...list];
        if (this.rankingList.length >= totalCount) {
          this.is_end = true;
        }
      }
    },

    handle(type, params) {
      this.$u.throttle(() => {
        switch (type) {
          case "changeCategory":
            this.catId = params;
            break;

          case "changeFilter":
            if (params === 2) {
              let sort_type = "";
              switch (this.sort_type) {
                case "":
                  sort_type = "1";
                  break;

                case "1":
                  sort_type = "0";
                  break;

                default:
                  sort_type = "";
                  break;
              }

              this.sort_type = sort_type;
            }

            if (this.sort !== params) {
              this.sort = params;
            }
            break;

          default:
            break;
        }

        this.clear();
      }, 500);
    }
  },

  onReachBottom() {
    if (this.is_end) {
      return;
    }

    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  background: #f2f2f2;
}

.header {
  background: #fff;
  padding: 0 24rpx;

  .search {
    padding: 18rpx 0;
  }

  .cat {
    display: flex;

    .item {
      position: relative;
      margin-right: 60rpx;
      padding: 26rpx 18rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      color: #262626;

      &.on {
        font-weight: bold;

        &:after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 20rpx;
          margin-left: -12rpx;
          width: 24rpx;
          height: 4rpx;
          background: #f0250e;
        }
      }
    }
  }
}

.content {
  padding: 24rpx;
}

.goodsList {
  .item {
    display: flex;
    margin-bottom: 24rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
  }

  .img {
    width: 160rpx;
    height: 160rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    margin-left: 20rpx;
  }

  .name {
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
    height: 80rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #262626;
  }

  .tag {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 14rpx;
    font-size: 24rpx;
    color: #8c8c8c;

    view {
      margin-right: 24rpx;
    }
  }

  .fd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f0250e;
  }

  .amount {
    position: relative;
    display: flex;

    view {
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      border-radius: 10rpx 0 0 10rpx;
      height: 50rpx;
      background: #fef5f3;
      font-size: 30rpx;
      font-weight: bold;
    }

    image {
      height: 50rpx;
    }
  }

  .price {
    display: flex;
    align-items: flex-end;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 1;

    &:before {
      content: "￥";
    }

    text {
      font-size: 36rpx;
      line-height: 0.9;
    }
  }
}

.ranking {
  overflow: hidden;
  .flex {
    display: flex;
    font-size: 24rpx;
    color: #262626;
  }

  .hd {
    margin-bottom: 14rpx;
    padding: 12rpx 24rpx;
    background: #f5f5f5;
    border-radius: 32px;
  }

  .bd {
    align-items: center;
    margin-bottom: 24rpx;
    padding: 24rpx;
    background: #fff;
    font-weight: bold;
    border-radius: 20rpx;
  }

  .tar {
    text-align: right;
  }

  .tac {
    text-align: center;
  }

  .info {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;

    .img {
      position: relative;
      width: 90rpx;
      height: 90rpx;
      border-radius: 10rpx;
      border: 2rpx solid #efefef;

      .pic {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }

      .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 24rpx;
      }
    }

    .goodsName {
      flex: 1;
      overflow: hidden;
      margin-left: 20rpx;
    }
  }

  .s1 {
    flex: 1;
    overflow: hidden;
  }

  .s2 {
    width: 20%;
  }
}

.filter {
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    align-items: center;
    margin: 0 24rpx 14rpx 0;
    padding: 0 24rpx;
    height: 58rpx;
    background: #f5f5f5;
    border-radius: 32px;
    font-size: 24rpx;
    color: #262626;

    &.active {
      color: #f0250e;
    }

    &.down {
      .s1 .iconfont {
        color: #f0250e;
      }
    }

    &.up {
      .s2 .iconfont {
        color: #f0250e;
      }
    }
  }

  .icons {
    position: relative;
    margin-left: 10rpx;
    height: 100%;
    width: 20rpx;
  }

  .s {
    position: absolute;
    left: 0;
  }

  .s1 {
    bottom: 18%;
  }

  .s2 {
    top: 18%;
    transform: rotate(180deg);
  }

  .iconfont {
    vertical-align: bottom;
    font-size: 22rpx;
    color: #8c8c8c;
  }
}
</style>
